<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片式任务记录系统</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/home.css">
</head>
<body>
  <div id="app">
    <el-container class="main-container">
      <!-- 头部区域 -->
      <el-header height="auto">
        <div class="header-content">
          <div class="header-left">
            <h2>卡片式任务记录</h2>
          </div>
          <div class="header-center">
            <el-input placeholder="搜索卡片..." v-model="searchKeyword" prefix-icon="el-icon-search" clearable></el-input>
          </div>
          <div class="header-right">
            <div class="card-stats">
              <el-tooltip content="卡片总数" placement="bottom">
                <div class="stat-item">
                  <i class="el-icon-tickets"></i>
                  <span>{{ totalCard }}</span>
                </div>
              </el-tooltip>
              <el-tooltip content="已完成" placement="bottom">
                <div class="stat-item">
                  <i class="el-icon-check"></i>
                  <span>{{ completedCount }}</span>
                </div>
              </el-tooltip>
              <el-tooltip content="待办" placement="bottom">
                <div class="stat-item">
                  <i class="el-icon-time"></i>
                  <span>{{ todoCard }}</span>
                </div>
              </el-tooltip>
            </div>
            <div class="current-time">{{ currentTime }}</div>
            <el-dropdown v-if="isLoggedIn">
              <span class="el-dropdown-link">
                {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="goToUserDetail">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="goToCardManagement">卡片管理</el-dropdown-item>
                <el-dropdown-item @click.native="goToMessagePage">消息中心</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div v-else>
              <el-button type="text" @click="goToLogin">登录</el-button> / 
              <el-button type="text" @click="goToRegister">注册</el-button>
            </div>
          </div>
        </div>
      </el-header>
      
      <!-- 任务管理统计区域 -->
      <div class="task-management">
        <div class="task-stats">
          <div class="task-stat-item">
            <div class="task-stat-number total">{{ totalCard }}</div>
            <div class="task-stat-label">总任务数</div>
          </div>
          <div class="task-stat-item">
            <div class="task-stat-number in-progress">{{ todoCard }}</div>
            <div class="task-stat-label">进行中</div>
          </div>
          <div class="task-stat-item">
            <div class="task-stat-number completed">{{ completedCount }}</div>
            <div class="task-stat-label">已完成</div>
          </div>
          <div class="task-stat-item">
            <div class="task-stat-number">{{ totalCard - todoCard - completedCount }}</div>
            <div class="task-stat-label">未开始</div>
          </div>
        </div>
      </div>
      
      <!-- 主体区域 -->
      <el-main>
        <div class="dimension-selector">
          <el-select v-model="currentDimension" placeholder="选择展示维度">
            <el-option v-for="item in dimensions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        
        <!-- 批量操作区域 -->
        <div class="batch-actions" v-show="hasSelectedCards">
          <el-button type="danger" size="small" @click="deleteSelectedCards">删除所选</el-button>
        </div>
        
        <div v-for="(group, index) in cardGroups" :key="index" class="card-group">
          <div class="group-header">
            <h3>{{ group.title }}</h3>
            <el-button type="text" @click="viewMoreCards(group.dimension, group.value)">更多</el-button>
          </div>
          
          <el-row :gutter="20" class="card-list">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="card in group.cards" :key="card.uuid">
              <div class="card-item" @dblclick="viewCardDetail(card)">
                <el-checkbox v-model="card.selected" @click.stop></el-checkbox>
                <h4 class="card-title">{{ card.title || '无标题' }}</h4>
                <p class="card-content">{{ card.content }}</p>
                <div class="card-footer">
                  <div class="card-owner" v-if="card.owner">
                    <el-avatar :size="small">{{ card.owner.charAt(0) }}</el-avatar>
                    <span>{{ card.owner }}</span>
                  </div>
                  <div class="card-views">
                    <i class="el-icon-view"></i>
                    <span>{{ card.views }}</span>
                  </div>
                </div>
                <div class="card-badges">
                  <el-tag size="mini" v-if="card.status">{{ card.status }}</el-tag>
                  <el-tag size="mini" v-if="card.priority" :type="getPriorityType(card.priority)">{{ card.priority }}</el-tag>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      
      <!-- 侧边抽屉 -->
      <el-drawer
        title="筛选器"
        :visible.sync="drawerVisible"
        direction="rtl"
        size="300px">
        <div class="filter-section">
          <h4>卡片责任人</h4>
          <el-checkbox-group v-model="filters.owners">
            <el-checkbox v-for="owner in ownerOptions" :key="owner.value" :label="owner.value">{{ owner.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
        
        <div class="filter-section">
          <h4>卡片优先级</h4>
          <el-checkbox-group v-model="filters.priorities">
            <el-checkbox v-for="priority in priorityOptions" :key="priority.value" :label="priority.value">{{ priority.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
        
        <div class="filter-section">
          <h4>卡片状态</h4>
          <el-checkbox-group v-model="filters.statuses">
            <el-checkbox v-for="status in statusOptions" :key="status.value" :label="status.value">{{ status.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
        
        <div class="drawer-footer">
          <el-button @click="resetFilters">重置</el-button>
          <el-button type="primary" @click="applyFilters">应用</el-button>
        </div>
      </el-drawer>
      
      <!-- 底部悬浮按钮 -->
      <div class="floating-button">
        <el-button type="primary" circle icon="el-icon-plus" @click="createNewCard"></el-button>
        <el-button type="info" circle icon="el-icon-setting" @click="drawerVisible = true"></el-button>
      </div>
    </el-container>
  </div>
  
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入首页JS -->
  <script src="./js/home.js"></script>
</body>
</html> 